{% extends 'base/cms_base.html' %}

{% block title %}
    文章管理
{% endblock %}

{% block head %}
    <style>
        .left-group{
            margin-left: 20px;
        }
    </style>
    <link rel="stylesheet" href="{% static 'adminlte/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css' %}">
    <script src="{% static 'adminlte/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js' %}"></script>
    <script src="{% static 'adminlte/bootstrap-datepicker/dist/locales/bootstrap-datepicker.zh-CN.min.js' %}"></script>
    <script src="{% static 'js/CMSArticle_list.min.js' %}"></script>
{% endblock %}

{% block content-header %}
    <h1>文章管理</h1>
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-12">
        <div class="box">
            <div class="box-header">
                <form action="" class="form-inline">
                    <div class="form-group left-group">
                        <label for="">时间：</label>
                        {% if start %}
                            <input type="text" class="form-control" name="start" id="start-picker" placeholder="开始时间" readonly value="{{ start }}">
                        {% else %}
                            <input type="text" class="form-control" name="start" id="start-picker" placeholder="开始时间" readonly>
                        {% endif %}
                        <span>-</span>
                        {% if end %}
                            <input type="text" class="form-control" name="end" id="end-picker" placeholder="结束时间" readonly value="{{ end }}">
                        {% else %}
                            <input type="text" class="form-control" name="end" id="end-picker" placeholder="结束时间" readonly>
                        {% endif %}
                    </div>
                    <div class="form-group left-group">
                        <label for="title-input">标题：</label>
                        {% if title %}
                            <input type="text" class="form-control" id="title-input" name="title" placeholder="关键字" value="{{ title }}">
                        {% else %}
                            <input type="text" class="form-control" id="title-input" name="title" placeholder="关键字">
                        {% endif %}
                    </div>
                    <div class="form-group left-group">
                        <label for="category-input">分类：</label>
                        <select name="category" id="category-input" class="form-control">
                            {% if categoryId == 0 %}
                                <option value="0" selected>所有分类</option>
                            {% else %}
                                <option value="0">所有分类</option>
                            {% endif %}
                            {% for category in categories %}
                                {% if categoryId == category.pk %}
                                    <option value="{{ category.pk }}" selected>{{ category.name }}</option>
                                {% else %}
                                    <option value="{{ category.pk }}">{{ category.name }}</option>
                                {% endif %}
                            {% endfor %}
                        </select>
                    </div>
                    <div class="form-group left-group">
                        <button class="btn btn-primary">查询</button>
                    </div>
                    <div class="form-group">
                        <a href="{% url 'cms:article_list' %}">清除查询</a>
                    </div>
                </form>
            </div>
            <div class="box-body">
                {% if paginator.count == 0 %}
                    <h3>没有查询到文章，请更换条件查找</h3>
                {% else %}
                    <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>标题</th>
                            <th>分类</th>
                            <th>发布时间</th>
                            <th>作者</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for article in articles %}
                            <tr>
                                <td><a target="_blank" href="{% url 'articles:article_detail' article_id=article.pk %}">{{ article.title }}</a></td>
                                <td>{{ article.category.name }}</td>
                                <td>{{ article.pub_time }}</td>
                                <td>{{ article.author.username }}</td>
                                <td>
                                    <a href="{% url 'cms:edit_article' %}?article_id={{ article.pk }}" class="btn btn-primary btn-xs">编辑</a>
                                    <button data-article-id="{{ article.id }}" class="btn btn-danger btn-xs delete-btn">删除</button>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
                {% endif %}
            </div>
            <div class="box-footer">
                <p class="pull-left">第{{ current_page }}页/总{{ paginator.num_pages }}页</p>
                <ul class="pagination pull-right">
                    {% if page_obj.has_previous %}
                        <li><a href="{% url 'cms:article_list' %}?page={{ page_obj.previous_page_number }}&{{ url_query }}">上一页</a></li>
                    {% else %}
                        <li class="disabled"><a href="javascript: void(0);">上一页</a></li>
                    {% endif %}
                    {% if left_has_more %}
                        <li><a href="{% url 'cms:article_list' %}?page=1&{{ url_query }}">1</a></li>
                        <li><a href="javascript: void(0);">...</a></li>
                    {% endif %}
                    {% for left_page in left_pages %}
                        <li><a href="{% url 'cms:article_list' %}?page={{ left_page }}&{{ url_query }}">{{ left_page }}</a></li>
                    {% endfor %}
                    <li class="active"><a href="javascript: void(0);">{{ current_page }}</a></li>
                    {% for right_page in right_pages %}
                        <li><a href="{% url 'cms:article_list' %}?page={{ right_page }}&{{ url_query }}">{{ right_page }}</a></li>
                    {% endfor %}
                    {% if right_has_more %}
                        <li><a href="javascript: void(0);">...</a></li>
                        <li><a href="{% url 'cms:article_list' %}?page={{ paginator.num_pages }}&{{ url_query }}">{{ paginator.num_pages }}</a></li>
                    {% endif %}
                    {# 下一页 #}
                    {% if page_obj.has_next %}
                        <li><a href="{% url 'cms:article_list' %}?page={{ page_obj.next_page_number }}&{{ url_query }}">下一页</a></li>
                    {% else %}
                        <li class="disabled"><a href="javascript: void(0);">下一页</a></li>
                    {% endif %}
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}
